<template>
    <span>
        <select class="form-control address" id="address" required @change="startzhou($event)" v-model="startAreaZhou" style="display: inline-block; margin-left:0;">
            <option disabled selected value="0">请选择</option>
            <option v-for="(item,index) in arealistZhou" :value="item.name">{{item.name}}</option>
        </select>
        <select class="form-control address" id="guojiaaddress" required @change="startguojia($event)" v-model="startAreaGuojia">
            <option disabled selected value="0">请选择</option>
            <option v-for="(item,index) in arealistGuojia" :value="item.name">{{item.name}}</option>
        </select>

        <div class="form-control address form-address-div">
            <input class="address-input" placeholder="请选择或者输入" @focus="focus($event)" @blur="blur($event)" @change="filloutsheng($event)" v-model="startAreaSheng" />
            <ul class="address-ul">
                <li v-for="(item,index) in arealistSheng" @click="startsheng($event,item.name)" >{{item.name}}</li>
            </ul>
        </div>
        <div class="form-control address form-address-div">
            <input class="address-input" placeholder="请选择或者输入" @focus="focus($event)" @blur="blur($event)" @change="filloutshi($event)" v-model="startAreaShi" />
            <ul class="address-ul">
                <li v-for="(item,index) in arealistShi" @click="startshi($event,item.name)" >{{item.name}}</li>
            </ul>
        </div>
        <div class="form-control address form-address-div">
            <input class="address-input" placeholder="请选择或者输入" @focus="focus($event)" @blur="blur($event)" @change="filloutqu($event)" v-model="startAreaQu" />
            <ul class="address-ul">
                <li v-for="(item,index) in arealistQu" @click="startqu($event,item.name)" >{{item.name}}</li>
            </ul>
        </div>

    </span>
</template>
<script>
    export default{
        data(){
            return {
                // 出发
                arealistUrl:'', //地区路径
                arealistZhou:'', //地区 洲
                arealistGuojia:'', //地区 国家
                arealistSheng:'', //地区 省
                arealistShi:'', //地区 市
                arealistQu:'', //地区 区
                arealistId:0, //地区的id
                // 出发地区
                startAreaZhou:'0', //出发地区 洲
                startAreaGuojia:'0', //出发地区 国家
                startAreaSheng:'', //出发地区 省
                startAreaShi:'', //出发地区 市
                startAreaQu:'', //出发地区 区
                // 地区
                startPath:'',
                startPathsheng:'',
                startPathshi:'',
                startPathqu:'',
            }
        },
        // props:['startpath'],
        computed:{
            AreaList(){ // 地区
                return this.$store.state.interface.areaList;
            },
        },
        methods:{
           startzhou(event){ //出发地区 洲
                event.target.style.color = '#7f889c';
                let self= this,Sons,id;
                for(let i in self.arealistZhou){
                    if( self.arealistZhou[i].name ==event.target.value){
                        self.$emit('DeparTure',self.arealistZhou[i].name,self.arealistZhou[i].path);//传值
                        Sons=self.arealistZhou[i].sons;
                        id=self.arealistZhou[i].id;
                    }
                }
                $(event.target).nextAll('.address').hide();
                self.startAreaGuojia=0; //出发地区 国家
                self.startAreaSheng=''; //出发地区 省
                self.startAreaShi=''; //出发地区 市
                self.startAreaQu=''; //出发地区 区
                self.arealistGuojia='';//地区 国家
                self.arealistSheng=''; //地区 省
                self.arealistShi=''; //地区 市
                self.arealistQu=''; //地区 区
                if(!Sons == 0){
                    self.$ajax.post(self.arealistUrl+'&fid='+id).then(function(res){
                        let areaList= res.data.result;
                        for(let i in areaList){
                            self.arealistGuojia = areaList[i];
                        }
                        if (res.data.code == '10000'){
                            $(event.target).next('.address').show();
                        }
                    },function(res){

                    })
                }

            },
            startguojia(event){ //出发地区 国家
                event.target.style.color = '#7f889c';
                let self= this, Sons,id;
                for(let i in self.arealistGuojia){
                    if( self.arealistGuojia[i].name ==event.target.value){
                        self.startPath=self.arealistGuojia[i].path;
                        self.$emit('DeparTure',self.arealistGuojia[i].name,self.arealistGuojia[i].path);//传值
                        Sons=self.arealistGuojia[i].sons;
                        id=self.arealistGuojia[i].id;
                    }
                }
                $(event.target).nextAll('.address').hide();
                self.startAreaSheng=''; //出发地区 省
                self.startAreaShi=''; //出发地区 市
                self.startAreaQu=''; //出发地区 区
                self.arealistSheng=''; //地区 省
                self.arealistShi=''; //地区 市
                self.arealistQu=''; //地区 区
                if(!Sons == 0){
                    self.$ajax.post(self.arealistUrl+'&fid='+id).then(function(res){
                        let areaList= res.data.result;
                        for(let i in areaList){
                            self.arealistSheng = areaList[i];
                        }
                        if (res.data.code == '10000'){
                            $(event.target).next('.address').css("display","inline-block");
                            // $('.shengaddress').show();
                        }
                    },function(res){

                    })
                }

            },
            focus(event){
                $(event.target).next('.address-ul').show();
            },
            blur(event){
                setTimeout(function(){
                    $(event.target).next('.address-ul').hide();
                },500)
            },
            filloutsheng(event){
                event.target.style.color = '#7f889c';
                this.$emit('DeparTure',event.target.value,this.startPath,0);//传值
                $(event.target).parents('.form-address-div').nextAll('.address').hide();
            },
            filloutshi(event){
                event.target.style.color = '#7f889c';
                this.$emit('DeparTure',event.target.value,this.startPathsheng,0);//传值
                $(event.target).parents('.form-address-div').nextAll('.address').hide();
            },
            filloutqu(event){
                event.target.style.color = '#7f889c';
                this.$emit('DeparTure',event.target.value,this.startPathshi,0);//传值
                $(event.target).parents('.form-address-div').nextAll('.address').hide();
            },
            startsheng(event,name){
                this.startAreaSheng=name;
                let self= this,Sons,id;
                for(let i in self.arealistSheng){
                    if( self.arealistSheng[i].name ==name){
                        self.startPathsheng=self.arealistSheng[i].path;
                        self.$emit('DeparTure',self.arealistSheng[i].name,self.arealistSheng[i].path);//传值
                        Sons=self.arealistSheng[i].sons;
                        id=self.arealistSheng[i].id;
                    }
                }
                $(event.target).parents('.form-address-div').nextAll('.address').hide();
                self.startAreaShi=''; //出发地区 市
                self.startAreaQu=''; //出发地区 区
                self.arealistShi=''; //地区 市
                self.arealistQu=''; //地区 区
                if(!Sons == 0){
                    self.$ajax.post(self.arealistUrl+'&fid='+id).then(function(res){
                        let areaList= res.data.result;
                        for(let i in areaList){
                            self.arealistShi = areaList[i];
                        }
                        if (res.data.code == '10000'){
                            $(event.target).parents('.form-address-div').next('.address').css("display","inline-block");
                        }
                    },function(res){

                    })
                }
                $(event.target).parents('.address-ul').hide();
            },

            startshi(event,name){ //出发地区 市
                // event.target.style.color = '#7f889c';
                this.startAreaShi=name;
                let self= this,Sons,id;
                for(let i in self.arealistShi){
                    if( self.arealistShi[i].name ==name){
                        self.startPathshi=self.arealistShi[i].path;
                        self.$emit('DeparTure',self.arealistShi[i].name,self.arealistShi[i].path);//传值
                        Sons=self.arealistShi[i].sons;
                        id=self.arealistShi[i].id;
                    }
                }
                $(event.target).parents('.form-address-div').nextAll('.address').hide();
                self.startAreaQu=''; //出发地区 区
                self.arealistQu=''; //地区 区
                if(!Sons == 0){
                    self.$ajax.post(self.arealistUrl+'&fid='+id).then(function(res){
                        let areaList= res.data.result;
                        for(let i in areaList){
                            self.arealistQu = areaList[i];
                        }
                        if (res.data.code === '10000'){
                            $(event.target).parents('.form-address-div').next('.address').css("display","inline-block");
                        }
                    },function(res){

                    })
                }
                $(event.target).parents('.address-ul').hide();
            },
            startqu(event,name){ //出发地区 区
                let self= this;
                self.startAreaQu=name;
                for(let i in self.arealistQu){
                    if( self.arealistQu[i].name ==name){
                        // self.thenewproduct.startCity=self.arealistQu[i].name;
                        // self.thenewproduct.startPath=self.arealistQu[i].path;
                        self.$emit('DeparTure',self.arealistQu[i].name,self.arealistQu[i].path);//传值
                    }
                }
                $(event.target).parents('.address-ul').hide();
            },
        },
        beforeMount(){
            let self= this;
            let url = self.TheNewProduct;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.arealistUrl=self.AreaList+'?sid='+sessionId; // 地址
            self.$ajax.post(self.arealistUrl+'&fid='+self.arealistId).then(function(res){
                let areaList= res.data.result;
                for(let i in areaList){
                    self.arealistZhou = areaList[i];
                }
            },function(res){
            })
        },
    }
</script>
<style lang="scss" scoped>
    .address{
        display: none;
    }
    .address{
        border: 1px solid #ddd;
        appearance: none;
        background: #fff url('../../assets/images/date.png') no-repeat scroll right center;
        &:focus{
            -webkit-box-shadow:0px 0px .5px .5px rgba(9, 186, 121, 0.4);
            -moz-box-shadow:0px 0px .5px .5px rgba(9, 186, 121, 0.4);
            box-shadow:0px 0px .5px .5px rgba(9, 186, 121, 0.4);
            border-color:rgba(9, 186, 121, 0.2);
        }
    }
    .datalist .option{
        color:#555;
        font-size: 12px;
    }
    .form-address-div{
        position: relative;
        padding: 0 !important;
        background: #fff url('../../assets/images/date.png') no-repeat scroll right center;

        box-sizing: border-box;
        .address-input{
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0 12px 0 8px;
            color: rgb(127, 136, 156);
            background: none;
            padding-right: 30px;
            font-size:12px;
            position: relative;
            top: -1px;
        }
        .address-ul{
            display: none;
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 100;
            max-height: 300px;
            overflow: auto;
            background-color: #fff;
            border: 1px solid #0091e4;
            li{
                font-size:12px;
                line-height: 18px;
                padding: 0 10px;
                &:hover{
                    background-color:#0091e4;
                    color:#fff;
                }
            }
        }
    }
</style>
